<!-- 年度点评管理 -->

<template>
    <!-- 面包屑导航 -->
    <a-breadcrumb>
        <a-breadcrumb-item>admin</a-breadcrumb-item>
        <a-breadcrumb-item>年评管理</a-breadcrumb-item>
    </a-breadcrumb>

    <div style="margin: 15px 0;">
        <!-- 视频类型选择 -->
        <a-form-item field="videoCate" label="类型">
            <a-select v-model="videoCate" @change="videoCateOnSelected" :style="{width:'120px'}" placeholder="选择分类">
                <a-option :value="cate.id" v-for="cate in cateList">{{cate.name}}</a-option>
            </a-select>
        </a-form-item>

        <!-- 数据表格 -->
        <div style="max-height: 620px;">
            <a-table column-resizable :columns="tableColumns" :hoverable="true" :stripe="true" :data="aReviewList"
                :scroll="{x: '120%', y: '100%'}">
                <template #operate="{ record }">
                    <a-button size="small" status="success" @click="showEditForm(record)" style="margin-left: 5px;">编辑
                    </a-button>
                    <a-popconfirm content="确定删除吗?" type="warning" @ok="deleteAReview(record.id)">
                        <a-button size="small" status="danger" style="margin-left: 5px;">删除</a-button>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>

        <!-- 添加按钮 -->
        <div style="margin: 10px 0;">
            <a-button type="primary" @click="showAddForm">
                <template #icon>
                    <icon-plus />
                </template>
                <template #default>添加</template>
            </a-button>
        </div>

    </div>


    <!-- 弹出添加/编辑表单 -->
    <a-modal :title="addFormTitle" v-model:visible="addFormIsShow" @cancel="addFormCancel" @ok="addFormOk">
        <a-form :model="addAReviewFormData">
            <a-form-item field="year" label="年份">
                <a-input-number :default-value="2000" :step="1" :max="2035" :min="1992" allow-clear
                    v-model="addAReviewFormData.year" />
            </a-form-item>
            <a-form-item field="videoCate" label="类型">
                <a-select v-model="addAReviewFormData.vCate" placeholder="选择分类">
                    <a-option :value="cate.id" v-for="cate in cateList">{{cate.name}}</a-option>
                </a-select>
            </a-form-item>
            <a-form-item field="comment" label="点评">
                <a-input v-model="addAReviewFormData.comment" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
    import { ref, } from 'vue';
    import { IconPlus, } from '@arco-design/web-vue/es/icon';
    import { Message } from '@arco-design/web-vue';
    import { getAnnualReviewList, addAnnualReview, editAnnualReview, deleteAnnualReview } from '../../api/annualreview';


    export default {
        components: {
            IconPlus,
        },
        setup() {
            // 表格列定义
            const tableColumns = ref([
                {
                    title: 'Id',
                    dataIndex: 'id',
                    width: 80,
                    ellipsis: true,
                    tooltip: true,
                },
                {
                    title: '年份',
                    dataIndex: 'year',
                    width: 80,
                },
                {
                    title: '点评',
                    dataIndex: 'comment',
                },
                {
                    title: '操作',
                    slotName: 'operate',
                    fixed: 'right',
                    width: 230,
                }
            ]);

            // 视频分类
            const cateList = ref([
                { id: 1, name: '电视剧' },
                { id: 2, name: '电影' },
                { id: 3, name: '动漫' },
            ]);

            // 选中的视频分类
            let videoCate = ref();

            // 年度点评列表数据
            const aReviewList = ref([]);

            // 是否显示添加/编辑表单
            const addFormIsShow = ref(false);

            // 表单标题
            const addFormTitle = ref('添加年度点评');

            // 表单数据存储
            const addAReviewFormData = ref({
                year: 2000,
                vCate: undefined,
                comment: '',
            });


            // 分类选择框选择事件
            const videoCateOnSelected = (cateId) => {
                getAnnualReviewList(cateId, true).then(res => {
                    if (res.code != 200) {
                        Message.error(`获取数据失败：${res.msg}`);
                        return;
                    }
                    aReviewList.value = res.data;
                }).catch(err => { console.log(err) });
            };


            // 显示添加年度点评表单
            const showAddForm = () => {
                addFormTitle.value = '添加年度点评';
                addFormIsShow.value = true;
            };

            // 提交添加/编辑年度点评
            const addFormOk = () => {
                // 判断是否是编辑年度点评
                if (isEdit.value) { // 是编辑
                    editAnnualReview(arId.value, addAReviewFormData.value).then(res => {
                        if (res.code != 200) {
                            Message.error(`操作失败：${res.msg}`);
                            return;
                        }
                        Message.success('操作成功');
                        getAnnualReviewList(videoCate.value, true).then(res => {
                            if (res.code != 200) {
                                Message.error(`获取数据失败：${res.msg}`);
                                return;
                            }
                            aReviewList.value = res.data;
                        }).catch(err => { console.log(err) });
                    }).catch(err => { console.log(err) });

                } else {    // 添加年度点评
                    addAnnualReview(addAReviewFormData.value).then(res => {
                        if (res.code != 200) {
                            Message.error(`操作失败：${res.msg}`);
                            return;
                        }
                        // // 清空选中的视频分类数据
                        // videoCate = ref();
                        Message.success('操作成功');
                        getAnnualReviewList(videoCate.value, true).then(res => {
                            if (res.code != 200) {
                                Message.error(`获取数据失败：${res.msg}`);
                                return;
                            }
                            aReviewList.value = res.data;
                        }).catch(err => { console.log(err) });
                    }).catch(err => { console.log(err) });
                }

                isEdit.value = false;
                addAReviewFormData.value = {};
                addFormIsShow.value = false;
            };

            // 取消添加视频
            const addFormCancel = () => {
                isEdit.value = false;
                addAReviewFormData.value = {};
                addFormIsShow.value = false;
            };

            // 是否为编辑
            const isEdit = ref(false);
            // 点评id
            const arId = ref();
            // 显示编辑表单
            const showEditForm = (record) => {
                addFormTitle.value = '编辑年度点评';
                isEdit.value = true;
                arId.value = record.id;
                addAReviewFormData.value = record;
                addAReviewFormData.value.vCate = videoCate.value;
                addFormIsShow.value = true;
            };

            // 删除年度点评
            const deleteAReview = (id) => {
                deleteAnnualReview(id).then(res => {
                    if (res.code != 200) {
                        Message.error(`操作失败：${res.msg}`);
                        return;
                    }
                    // // 清空选中的视频分类数据
                    // videoCate = ref();
                    // // 清空表格数据
                    // aReviewList.value = [];
                    getAnnualReviewList(videoCate.value, true).then(res => {
                        if (res.code != 200) {
                            Message.error(`获取数据失败：${res.msg}`);
                            return;
                        }
                        aReviewList.value = res.data;
                    }).catch(err => { console.log(err) });
                    Message.success('操作成功');
                }).catch(err => { console.log(err) });
            };

            return {
                tableColumns,
                cateList,
                videoCate,
                aReviewList,
                addFormIsShow,
                addFormTitle,
                addAReviewFormData,

                videoCateOnSelected,
                showAddForm,
                addFormOk,
                addFormCancel,
                showEditForm,
                deleteAReview,

            }

        }
    }

</script>